<template>

  <div class="editor-container">
    <!-- 侧边导航 -->
    <!-- <aside class="sidebar">
      <div class="logo">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#FF424D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M2 17L12 22L22 17" stroke="#FF424D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M2 12L12 17L22 12" stroke="#FF424D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span>一个Team</span>
      </div>

      <nav class="nav-menu">
        <a href="#" class="nav-item">数据统计</a>
        <a href="#" class="nav-item">资料库 </a>
        <a href="#" class="nav-item">受众</a>
        <a href="#" class="nav-item">数据分析</a>
        <a href="#" class="nav-item">收款</a>
        <a href="#" class="nav-item">社区</a>
        <a href="#" class="nav-item">通知</a>
        <a href="#" class="nav-item">设置</a>
      </nav>
    </aside> -->

    <!-- 主内容区 -->
    <main class="main-content">
      <header class="page-header">
        <h1>编辑帖子</h1>
<!--        <div class="action-buttons">-->
<!--          <a-button type="default" style="margin-right: 8px;">保存草稿</a-button>-->
<!--          <a-button type="primary">发布</a-button>-->
<!--        </div>-->
      </header>

      <div class="editor-content">
        <!-- 创作者信息 -->
        <div class="creator-info">
          <div class="creator-avatar">
            <img :src="userInfo.filePath" alt="Creator Avatar">
          </div>
          <div class="creator-name">{{userInfo.username}}</div>
          <span class="creator-badge">创作者</span>
        </div>

        <!-- 内容类型选择器 -->
<!--        <div class="content-type-tabs">-->
<!--          <a-tabs default-active-key="post" size="large">-->
<!--            <a-tab-pane key="post" tab="帖子"></a-tab-pane>-->
<!--&lt;!&ndash;            <a-tab-pane key="video" tab="视频"></a-tab-pane>&ndash;&gt;-->
<!--            &lt;!&ndash; <a-tab-pane key="audio" tab="音频"></a-tab-pane>-->
<!--            <a-tab-pane key="image" tab="图片"></a-tab-pane>-->
<!--            <a-tab-pane key="link" tab="链接"></a-tab-pane>-->
<!--            <a-tab-pane key="poll" tab="投票"></a-tab-pane>-->
<!--            <a-tab-pane key="live" tab="直播"></a-tab-pane> &ndash;&gt;-->
<!--&lt;!&ndash;          </a-tabs>&ndash;&gt;-->
<!--        </div>-->

        <!-- 媒体上传区域 -->
<!--        <div class="media-upload-area">-->
<!--          <div class="upload-container">-->
<!--            <div class="upload-prompt">-->
<!--              <p>拖放视频、音频或图片文件以上传，<a href="#">浏览</a> 或 <a href="#">嵌入 URL</a></p>-->
<!--              <p style="margin-top: 8px;">拖放图片、视频或音频文件作为帖子的主要内容。</p>-->
<!--              <div class="upload-actions">-->
<!--                <a-button type="default" icon="upload">上传文件</a-button>-->
<!--                <a-button type="text" style="margin-left: 16px;">-->
<!--                  <template #icon><link-outlined /></template>-->
<!--                  嵌入 URL-->
<!--                </a-button>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->

         <!-- 正文编辑区 -->
        <div class="post-content-editor">
          <h3>标题</h3>
          <a-textarea
            placeholder="标题..."
            rows="1"
            style="width: 100%;"
            v-model:value="form.title"
          ></a-textarea>
        </div>

        <!-- 正文编辑区 -->
        <div class="post-content-editor">
          <h3>正文</h3>
          <a-textarea
            placeholder="开始撰写你的帖子内容..."
            rows="10"
            style="width: 100%;"
            v-model:value="form.content"
          ></a-textarea>
        </div>

        <!-- 附件区域 -->
<!--        <div class="attachments-section">-->
<!--          <h3>附件</h3>-->
<!--          <a-upload-->
<!--            name="file"-->
<!--            action="/upload.do"-->
<!--            list-type="text"-->
<!--          >-->
<!--            <a-button type="default" icon="upload">-->
<!--              上传附件-->
<!--            </a-button>-->
<!--          </a-upload>-->
<!--        </div>-->

        <!-- 帖子设置选项 -->
        <div class="post-settings">
<!--          <div class="setting-item">-->
<!--            <a-checkbox>将帖子创建为限时活动</a-checkbox>-->
<!--            <p class="setting-description">定时发布视频，以限时活动的形式直播，让粉丝们一同观看并实时聊天。</p>-->
<!--            <a href="#" class="setting-link">了解限时活动</a>-->
<!--          </div>-->

<!--          <div class="setting-item">-->
<!--            <h3>合集</h3>-->
<!--            <p class="setting-description">相关帖子的合集有助于粉丝浏览您的作品。</p>-->
<!--            <a-button type="text" class="setting-link">创建合集</a-button>-->
<!--          </div>-->

          <div class="setting-item">
            <h3>标签</h3>
            <a-select
              v-model:value="selectedTags"
              mode="multiple"
              placeholder="请选择标签"
              style="width: 100%"
              @change="handleTagChange"
            >
              <a-select-option
                v-for="tag in tagList"
                :key="tag.id"
                :value="tag.id"
              >
                {{ tag.tagName }}
              </a-select-option>
            </a-select>
          </div>
        </div>

        <!-- 底部导航按钮 -->
        <div class="bottom-navigation">
          <a-button type="text" @click="router.back()">返回</a-button>
          <a-button type="primary" @click="onPublish">发布</a-button>
        </div>

        <!-- 预览选项 -->
<!--        <div class="preview-option">-->
<!--          <a href="#">以会员身份查看帖子</a>-->
<!--        </div>-->
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref,onMounted,reactive } from 'vue'
import {
  LinkOutlined,
  UploadOutlined
} from '@ant-design/icons-vue';
import {
  Button,
  Checkbox,
  Input,
  Textarea,
  Tabs,
  TabPane, message
} from 'ant-design-vue'
import './AddText.css' // 引入样式文件
// 可以在这里添加组件逻辑，如文件上传处理、表单验证等
//拿到localstorage中的用户信息
const userInfoStr = localStorage.getItem('userInfo');
import{getUser} from '@/api/sysUserController'
import { publish } from '@/api/bizPostController.js'
import { useRoute,useRouter } from 'vue-router'
import { getTagList } from '@/api/sysTagController.js'
let username = '';
const selectedTags = ref([]);
const userInfo = ref({})
const form = reactive({
  title: '',
  content: '',
  coverImage: '',
  tags: []
})
// 标签选择处理
const handleTagChange = (values) => {
  selectedTags.value = values;
  // 将选中的标签ID转换为逗号分隔的字符串
  form.tags = values.join(',');
};
// 获取用户信息的方法
const getUserinfo = async () => {
  try {
    const response = await getUser();

    if (response.data.code === 0) {
      userInfo.value = response.data.data
      console.log('用户信息:', userInfo.value)
    } else {
      console.warn('获取用户信息失败:', response.data.message)
    }
  } catch (error) {
    console.error('请求用户信息失败:', error)
  }
}

const route = useRoute()
const router = useRouter()
const onPublish = async () => {
  if (form.title === '') {
    message.error('标题不能为空')
    return
  }
  if (form.content === '') {
    message.error('内容不能为空')
    return
  }
  const res = await publish({
    userId: userInfo.value.userId,
    teamId: route.query.teamId,
    title: form.title,
    content: form.content,
    coverImage: form.coverImage,
    tags: form.tags
  })
  console.log(res)
  if (res.data.code === 0) {
    message.success('发布成功')
    router.back()
  } else {
    message.error('发布失败')
  }
}

const tagList = ref([]);

// 获取标签列表
const fetchTagList = async () => {
  try {
    const response = await getTagList();

    if (response.data.code === 0) {
      tagList.value = response.data.data;
    } else {
      console.error('获取标签列表失败:', response.data.message);
    }
  } catch (error) {
    console.error('获取标签列表失败：', error);
    // 如果API调用失败，使用模拟数据
    tagList.value = [
      { id: 1, tagName: 'Java', tagType: 1 },
      { id: 2, tagName: 'Python', tagType: 1 },
      { id: 3, tagName: 'Vue', tagType: 1 },
      { id: 4, tagName: 'JS', tagType: 1 },
      { id: 5, tagName: 'Spring', tagType: 1 },
      { id: 6, tagName: 'SpringBoot', tagType: 1 },
      { id: 7, tagName: 'SpringCloud', tagType: 1 }
    ];
    console.log('使用模拟标签数据:', tagList.value);
  }
};
onMounted(() => {
  fetchTagList();
  getUserinfo();
});

</script>

<style>
@import './AddText.css';
</style>
